<template>
	<view class="make-page">
		<u-navbar :autoBack="true" title="预约" :placeholder="true" bgColor="rgba(255,255,255,0)"></u-navbar>
		<view class="content">
			<view class="head-box">
				<view class="head">
					<image :src="getAvatarUrl(info.avatar)" mode="aspectFill">
					</image>
					<view class="head-label">
						<image src="https://m.lqvvvv.com/assets/static/index/amuse.png" mode=""></image>
						<view v-if="info.is_official == 1">
							官方认证
						</view>
						<view v-if="info.is_official == 0">
							实名认证
						</view>
					</view>
				</view>
				<view class="head-right">
					<view class="name">
						{{info.nickname}}
					</view>
					<view class="head-info">
						<view class="id">
							ID:{{info.id}}
						</view>
						<view class="age">
							<image src="https://m.lqvvvv.com/assets/static/index/female0.png" mode=""></image>
							<view>
								{{info.age}}
							</view>
						</view>
					</view>
					<view class="introduce">
						<image src="https://m.lqvvvv.com/assets/static/index/punctuation.png" mode=""></image>
						<view>
							{{info.intro}}
						</view>
					</view>
				</view>
			</view>
			<view class="title">
				探店主题(小时)
			</view>
			<view class="tag-list">
				<view v-for="(tag, index) in info.subjects" :key="index" class="tag-item"
					:class="{ 'active': selectedTags.includes(tag) }" @click="toggleTag(tag)">
					<image :src="'https://m.lqvvvv.com'+tag.image" mode=""></image>
					<div>{{ tag.title }}</div>
					<text>{{tag.price}}</text>币
				</view>
			</view>
			<view class="title">
				探店地点
			</view>
			<view class="choice" @click="goposition">
				<view class="choice-text">
					{{address || '请选择位置'}}
				</view>
				<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
			</view>
			<view class="title">
				详细地址
			</view>
			<view class="choice">
				<view class="choice-text">
					<u--input placeholder="详细地址选填" placeholderStyle="color:#666" border="none"
						v-model="house"></u--input>
				</view>
			</view>
			<view class="title">
				探店时间
			</view>
			<view class="choice" @click="showTime = true">
				<view class="choice-text">
					{{time || '请选择时间'}}
				</view>
				<u-icon name="arrow-down" color="#999999" size="16"></u-icon>
			</view>
			<view class="title">
				探店时长
			</view>
			<view class="choice" @click="openhour">
				<view class="choice-text">
					{{hour}}小时
				</view>
				<u-icon name="arrow-down" color="#999999" size="16"></u-icon>
			</view>
			<view class="title">
				支付方式
			</view>
			<view class="choice" @click="openPay">
				<view class="choice-text">
					{{paytype}}
				</view>
				<u-icon name="arrow-down" color="#999999" size="16"></u-icon>
			</view>
			<view class="title">
				优惠券
			</view>
			<view class="choice" @click="couponshow = true">
				<view class="choice-text">
					{{coupon}}
				</view>
				<u-icon name="arrow-down" color="#999999" size="16"></u-icon>
			</view>
			<view class="title">
				路费
			</view>
			<view class="choice">
				<view class="choice-text" v-if="fare > 0">
					<text>{{fare}}币</text>
				</view>
				<view class="choice-text" v-else>
					0币
				</view>
			</view>
			<view class="agreement">
				<u-checkbox-group>
					<u-checkbox @change="handleChange" :value="checked" size="18" active-color="#19A9FE"
						shape="circle"></u-checkbox>
				</u-checkbox-group>
				<view class="agreement-text">
					预约需签订<text @click="goagreement('rental_agreement')">《探店协议》</text>去签订>
				</view>
			</view>
			<view style="height: 160rpx;"></view>
			<view class="bottom-info">
				<view class="info-left">
					<view class="price">
						总金额：
						<text>
							{{fare + Number(selectedTags[0].price) * Number(hour) - Number(num)}}币
						</text>
					</view>
				</view>
				<view class="pay-btn" @click="gopay()">
					支付
				</view>
			</view>
		</view>
		<u-datetime-picker :show="showTime" :minDate="new Date().getTime()" :formatter="formatter"
			v-model="formattedTime" mode="datetime" @confirm="handleConfirm"
			@cancel="showTime = false"></u-datetime-picker>
		<u-picker :show="showHour" keyName="label" :columns="hourList" @cancel="showHour = false"
			@confirm="hourHandle"></u-picker>
		<u-picker :show="showPay" :columns="payList" @cancel="showPay = false" @confirm="payHandle"></u-picker>
		<u-picker :show="couponshow" :columns="couponcolumns" @confirm="couponHandle" @cancel="couponshow = false"
			keyName="coupon_name"></u-picker>
		<u-popup :show="tispshow" @close="close" :round="10" mode="center" :safeAreaInsetBottom="false">
			<view class="pop-box">
				<view class="poptitle">温馨提示</view>
				<view class="cont">
					<view class="text">一、下单后需耐心等待达人接单，10分钟未接单，系统自动退款。</view>
					<view class="text" style="color: red;">
						二、达人接单后，若客户临时有事或见面不满意可取消订单，扣除保证金用于补偿平台信息服务成本和达人出行成本。见到达人满意后点击确认到达，确认到达后无法退单！</view>
					<view class="text">
						三、平台为正规绿色探店平台，严禁黄赌毒、咸猪手、语言攻击等行为。若是美酒探店单以外不可饮酒，美酒探店单不可强行灌酒，若是台球单不得以技术不专业为由要求退单。若客户违规达人可无责离场，并不退还本次下单金额。
					</view>
				</view>
				<view  style="margin-top: 20rpx;">
					<u-button @click="close" type="primary" color="linear-gradient(269deg, #5755F2 0%, #CC7BFF 100%)"
						text="我知道了"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import permision from "@/js_sdk/wa-permission/permission.js";
	export default {
		data() {
			return {
				tispshow: true,
				coupon: '选择优惠券',
				couponshow: false,
				num: 0,
				couponid: '',
				couponcolumns: [],
				address: '',
				showTime: false,
				formattedTime: '', // 绑定到组件的格式化时间
				time: '',
				showHour: false,
				showPay: false,
				hourList: [],
				payList: [
					// '支付宝',
					['微信', '余额']
				],
				hour: 3,
				paytype: '微信',
				checked: false,
				selectedTags: [], // 当前选中的标签
				info: {},
				type: 1,
				fare: 0,
				deposit: '',
				house: '',
				lat: '',
				lng: ''
			}
		},
		onLoad(e) {
			this.info = JSON.parse(decodeURIComponent(e.info));
			// 确保 subjects 数组不为空
			if (this.info.subjects.length > 0) {
				this.selectedTags.push(this.info.subjects[0]);
			}
			this.getdeposit();
			this.postcoupon();
		},
		computed: {
			...mapState({
				city: state => state.city,
			})
		},
		methods: {
			close() {
				this.tispshow = false
			},
			getAvatarUrl(avatar) {
				if (!avatar) {
					return 'https://m.lqvvvv.com/assets/static/index/head.png';
				}
				return avatar.startsWith('http') ? avatar : `https://m.lqvvvv.com${avatar}`;
			},
			couponHandle(e) {
				console.log(e)
				this.coupon = e.value[0].coupon_name
				this.num = e.value[0].coupon_price
				this.couponid = e.value[0].id
				this.couponshow = false
			},
			postcoupon() {
				let params = {
					page: this.page,
					limit: 100
				}
				this.$Request({
					method: 'POST',
					url: '/api/user/getMyCoupon',
					data: params,
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						this.pay_quanList = res.data.data
						this.couponcolumns.push(this.pay_quanList)
						console.log(this.couponcolumns)
					}
				})
			},
			getdeposit() {
				let params = {
					name: 'deposit_money'
				}
				this.$Request({
					method: 'POST',
					url: '/api/index/getConfig',
					data: params,
					ismsg: false,
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.deposit = res.data
					}
				})
			},
			goagreement(name) {
				this.$navTo.togo('/pages/my/agreement/index', {
					name: name
				})
			},
			gopay() {
				if (this.checked == false) {
					uni.showToast({
						title: "请仔细阅读并同意探店协议！",
						icon: 'none'
					})
					return
				}
				if (this.selectedTags.length < 1) {
					uni.showToast({
						title: "请选择约友主题！",
						icon: 'none'
					})
					return
				}
				if (this.address == '') {
					uni.showToast({
						title: "请选择预见地址！",
						icon: 'none'
					})
					return
				}
				if (this.time == '') {
					uni.showToast({
						title: "请选择预见时间！",
						icon: 'none'
					})
					return
				}
				if (this.hour < this.info.min_hours) {
					uni.showToast({
						title: "最低探店时间为" + this.info.min_hours + "小时",
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					mask: true
				})
				let params = {
					friend_id: this.info.id,
					subject_id: JSON.stringify(this.selectedTags[0].id),
					hours: this.hour,
					address: this.address + this.house,
					paytype: '',
					order_type: 'all',
					start_time: this.time,
					distance_money: this.fare,
					// #ifdef APP
					method: 'app',
					// #endif
					// #ifdef H5
					method: 'web',
					// #endif
					// #ifdef MP-WEIXIN
					method: 'miniapp',
					// #endif
					lat: this.lat,
					lng: this.lng,
					user_coupon_id: this.couponid,
					city: this.city
				}
				if (this.paytype == '微信') {
					params.paytype = 'wechat'
				}
				if (this.paytype == '支付宝') {
					params.paytype = 'alipay'
				}
				if (this.paytype == '余额') {
					params.paytype = 'balance'
				}
				this.$Request({
					method: 'POST',
					url: '/api/friend_order/add',
					data: params,
					ismsg: true,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						if (this.paytype == '余额') {
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/my/order/reservat'
								})
							}, 1000)
						}
						if (this.paytype == '微信') {
							let orderInfo = res.data
							console.log(orderInfo)
							uni.requestPayment({
								"provider": 'wxpay',
								...orderInfo,
								success: (res) => {
									console.log('支付成功', res);
									uni.navigateTo({
										url: '/pages/my/order/reservat'
									})
									// 处理支付成功后的逻辑
								},
								fail: (err) => {
									uni.showToast({
										title: '支付失败！',
										icon: 'none'
									})
									console.error('支付失败', err);
									// 处理支付失败的逻辑
								},
							});
						}
					}
				})
			},
			openPay() {
				this.showPay = true
			},
			openhour() {
				const hours = Array.from({
					length: 12
				}, (_, i) => i + 1);
				this.hourList = [
					hours.map(hour => ({
						label: `${hour}小时`,
						time: hour
					}))
				];
				this.showHour = true
			},
			handleConfirm(e) {
				this.time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');
				this.showTime = false;
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`;
				}
				if (type === 'month') {
					return `${value}月`;
				}
				if (type === 'day') {
					return `${value}日`;
				}
				if (type === 'hour') {
					return `${value}时`;
				}
				if (type === 'minute') {
					return `${value}分`;
				}
				return value;
			},
			async goposition() {
				let app = this
				// #ifdef APP
				let result = await permision.requestAndroidPermission('android.permission.ACCESS_FINE_LOCATION')
				if (result == 1) {
					uni.chooseLocation({
						success: function(res) {
							app.address = res.address
							app.lat = res.latitude
							app.lng = res.longitude
							let params = {
								lat: res.latitude,
								lng: res.longitude,
								friend_id: app.info.id
							}
							app.$Request({
								method: 'POST',
								url: '/api/friend_order/calculateDistance',
								data: params,
								ismsg: false,
							}).then(res => {
								console.log(res)
								if (res.code == 1) {
									if (res.data.money == 0) {
										app.fare = 0
									} else {
										app.fare = res.data.money
									}

								}
							})
						}
					});
				} else if (result == 0) {
					uni.showToast({
						title: '请您授权位置权限!方便我们获取您的位置!',
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: '请您打开位置权限！',
						icon: 'none'
					})
					setTimeout(() => {
						permision.gotoAppPermissionSetting()
					}, 1000)
				}
				// #endif
				// #ifdef H5
				uni.chooseLocation({
					success: function(res) {
						app.address = res.address
						app.lat = res.latitude
						app.lng = res.longitude
						let params = {
							lat: res.latitude,
							lng: res.longitude,
							friend_id: app.info.id
						}
						app.$Request({
							method: 'POST',
							url: '/api/friend_order/calculateDistance',
							data: params,
							ismsg: false,
						}).then(res => {
							console.log(res)
							if (res.code == 1) {
								if (res.data.money == 0) {
									app.fare = 0
								} else {
									app.fare = res.data.money
								}
							}
						})
					},
					fail(err) {
						console.log(err)
					}
				});
				// #endif
				// #ifdef MP-WEIXIN
				uni.chooseLocation({
					success: function(res) {
						app.address = res.address
						app.lat = res.latitude
						app.lng = res.longitude
						let params = {
							lat: res.latitude,
							lng: res.longitude,
							friend_id: app.info.id
						}
						app.$Request({
							method: 'POST',
							url: '/api/friend_order/calculateDistance',
							data: params,
							ismsg: false,
						}).then(res => {
							console.log(res)
							if (res.code == 1) {
								if (res.data.money == 0) {
									app.fare = 0
								} else {
									app.fare = res.data.money
								}
							}
						})
					},
					fail(err) {
						console.log(err)
					}
				});
				// #endif
			},
			toggleTag(tag) {
				const index = this.selectedTags.indexOf(tag);
				if (index != -1) {
					this.selectedTags.splice(index, 1);
				} else {
					this.selectedTags = []
					this.selectedTags.push(tag);
				}
			},
			hourHandle(e) {
				this.hour = e.value[0].time
				this.showHour = false
			},
			payHandle(e) {
				this.paytype = e.value[0]
				this.showPay = false
			},
			handleChange() {
				this.checked = !this.checked
			},
		}
	}
</script>

<style>
	page {
		background-color: #F7F8FC;
	}
</style>
<style lang="scss" scoped>
	.make-page {
		min-height: 100vh;
		background-image: url('https://m.lqvvvv.com/assets/static/index/nav-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 900rpx;

		.pop-box {
			width: 600rpx;
			padding: 20rpx 30rpx;

			.poptitle {
				text-align: center;
				font-size: 32rpx;
				margin-bottom: 20rpx;
			}

			.cont {
				font-size: 28rpx;


				.text {
					margin-bottom: 10rpx;
				}
			}
		}

		.content {
			padding: 30rpx;

			.head-box {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.head {
					position: relative;

					image {
						width: 206rpx;
						height: 206rpx;
						border-radius: 50%;
					}

					.head-label {
						position: absolute;
						bottom: 0;
						right: 0;
						left: 0;
						display: flex;
						align-items: center;
						color: #fff;
						font-weight: bold;
						font-size: 24rpx;
						background-color: #5755F2;
						padding: 12rpx;
						border-radius: 30rpx;
						justify-content: center;

						image {
							width: 32rpx;
							height: 32rpx;
							margin-right: 10rpx;
						}
					}
				}

				.head-right {
					margin-left: 40rpx;

					.name {
						color: #000000;
						font-size: 32rpx;
						font-weight: bold;
					}

					.head-info {
						margin-top: 20rpx;
						font-size: 24rpx;
						display: flex;
						align-items: center;

						.id {
							color: #5755F2;
							background-color: #D6D5FF;
							padding: 2rpx 10rpx;
							border-radius: 5rpx;
							margin-right: 20rpx;
						}

						.age {
							color: #F24789;
							background-color: #FFE0EC;
							padding: 2rpx 20rpx;
							border-radius: 20rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 20rpx;
								height: 20rpx;
							}
						}
					}

					.introduce {
						display: flex;
						align-items: center;
						margin-top: 30rpx;
						font-size: 24rpx;

						image {
							width: 38rpx;
							height: 38rpx;
							margin-right: 10rpx;

						}
					}
				}
			}

			.title {
				padding: 30rpx 0;
				font-weight: bold;
				color: #000000;
				font-size: 32rpx;
			}

			.tag-list {
				display: flex;
				flex-wrap: wrap;

				.tag-item {
					border: 1rpx solid #ccc;
					border-radius: 10rpx;
					transition: background-color 0.3s, color 0.3s, border-color 0.3s;
					margin-bottom: 20rpx;
					text-align: center;
					padding: 10rpx;
					font-size: 26rpx;
					margin-left: 20rpx;
					background-color: #fff;
					display: flex;
					align-items: center;
					div{
						margin-left: 10rpx;
					}
					image{
						width: 42rpx;
						height: 42rpx;
					}
					&.active {
						background-color: #6972f2;
						color: #fff;
						border-color: #6972f2;
					}
					text{
						color: #F24789;
						padding: 0 10rpx;
					}
				}
			}

			.choice {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 30rpx;
				border: 1rpx solid #DADAFF;
				border-radius: 15rpx;

				.choice-text {
					font-size: 28rpx;
					color: #666;
				}
			}

			.agreement {
				display: flex;
				align-items: center;
				margin-top: 40rpx;

				.agreement-text {
					color: #8B8DA0;
					font-size: 28rpx;

					text {
						color: #5755F2;
					}
				}
			}

			.bottom-info {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				display: flex;
				justify-content: space-between;
				background-color: #FFFFFF;
				padding: 30rpx;

				.info-left {
					display: flex;
					align-items: center;

					.ensure {
						display: flex;
						align-items: center;

						image {
							width: 30rpx;
							height: 30rpx;
							margin-right: 20rpx;
						}
					}

					.price {
						font-size: 28rpx;
						color: #000000;
						margin-left: 40rpx;

						text {
							font-size: 40rpx;
							color: #F24789;
						}
					}
				}

				.pay-btn {
					width: 140rpx;
					background-image: url('https://m.lqvvvv.com/assets/static/index/make-bg.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
					padding: 30rpx;
					color: #fff;
					text-align: center;
				}
			}
		}
	}
</style>